<template>
  <!-- #ifdef APP-PLUS -->
  <view class="h-[2.75rem]"></view>
  <!-- #endif -->
  <view class="flex flex-col justify-center items-center !px-4 bg-center bg-no-repeat bg-cover p-4">
    <view class="flex justify-between items-center w-full">
      <view></view>
      <view class="flex gap-4 items-center font-bold">
        <view class="text-[1rem] text-[#068BCA] font-bold" @click="toLogin">登录</view>
        <view class="text-[1rem] text-[#068BCA] font-bold" @click="toFindPassword">找回密码</view>
      </view>
    </view>
    <image src="/static/logo@3x.png" mode="scaleToFill" class="size-[6.25rem] mt-7 overflow-hidden rounded-full" />
    <!-- <image src="/static/emeiSect@3X.png" mode="scaleToFill" class="w-[5.25rem] h-[2.125rem] mt-3" /> -->
    <view class="text-[#068BCA] font-bold text-[35px]">峨眉派</view>

    <!-- <view class="text-[16px] text-[#947D07]"> 邀请ID：hiajsow123 </view> -->
    <!-- 表单 -->
    <!-- 表单 -->
    <!-- 表单 -->
    <view class="flex flex-col gap-4 justify-center mt-8 w-full">
      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold">账户</view>
        <input type="number" placeholder="请输入账号" class="text-[1rem] text-[#8A8A8A] text-left w-[70%]" v-model="state.mobile" maxlength="11" />
      </view>

      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold flex-none">验证码</view>
        <view class="flex items-center w-[70%] justify-between">
          <input type="number" placeholder="请输入验证码" class="text-[1rem] text-[#8A8A8A]" v-model="state.code" maxlength="4" />
          <view
            @click="getSmsCode('smsRegister', state.mobile)"
            class="px-2 py-1 rounded-full border-[.0625rem] border-solid border-[#823C08] grid place-items-center flex-none"
          >
            <view class="text-[13px] text-[#823C08]"> {{ getSmsTimer('smsRegister') }} </view>
          </view>
        </view>
      </view>
      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold">密码</view>
        <input type="password" placeholder="请输入密码" class="text-[1rem] text-[#8A8A8A] w-[70%]" v-model="state.password" />
      </view>
      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold">确认密码</view>
        <input type="password" placeholder="请输入确认密码" v-model="state.confirmPassword" class="text-[1rem] text-[#8A8A8A] w-[70%]" />
      </view>
      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold">邀请码</view>
        <input type="text" placeholder="请输入邀请码" v-model="state.share" class="text-[1rem] text-[#8A8A8A] w-[70%]" />
      </view>
      <view class="flex items-center mt-4">
        <u-checkbox-group @change="checkboxGroupChange">
          <u-checkbox v-model="state.checked" shape="circle"></u-checkbox>
        </u-checkbox-group>
        <view class="text-[13px] text-[#616161] flex items-center">
          我已阅读
          <view class="text-[#068BCA]" @click="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)"> 用户协议 </view>
          及
          <view class="text-[#068BCA]" @click="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)">隐私政策</view>
        </view>
      </view>
      <view class="h-[44px] bg-[#068BCA] rounded-md grid place-items-center" @click="confirmExchange">
        <view class="font-bold text-[16px] text-[#FFFFFF]"> 注册 </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';

  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  const appInfo = computed(() => sheep.$store('app').info);

  const state = ref({
    checked: false,
    mobile: '',
    code: '',
    password: '',
    confirmPassword: '',
    share: '',
  });

  // 从URL中解析spm参数的最后一部分
  function parseCodeFromUrl() {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    if (currentPage && currentPage.options && currentPage.options.spm) {
      const spmParts = currentPage.options.spm.split('.');
      if (spmParts.length >= 6) {
        state.share = spmParts[5]; // 获取spm参数的最后一部分（如FKPVBT）
      }
    }
  }

  onLoad((e) => {
    parseCodeFromUrl();
    if (e && e.spm) {
      const spmParts = e.spm.split('.');
      if (spmParts.length >= 6) {
        state.value.share = spmParts[5]; // 获取spm参数的最后一部分（如FKPVBT）
      }
    }
  });
  //---------------
  function onProtocol(id, title) {
    closeAuthModal();
    sheep.$router.go('/pages/public/richtext', {
      id,
      title,
    });
  }

  function toRegister() {
    uni.navigateTo({
      url: '/pages/yy/register',
    });
  }
  function toFindPassword() {
    uni.navigateTo({
      url: '/pages/yy/forgotPassword',
    });
  }
  function checkboxGroupChange() {
    state.value.checked = !state.value.checked;
  }

  function getCode() {
    if (!state.value.username) {
      uni.showToast({
        title: '请输入账号',
        icon: 'none',
      });
      return;
    }
  }
  async function confirmExchange() {
    if (!state.value.mobile) {
      vk.toast('请输入账号', 'none');
      return;
    }
    if (!state.value.code) {
      uni.showToast({
        title: '请输入验证码',
        icon: 'none',
      });
      return;
    }
    if (!state.value.password) {
      uni.showToast({
        title: '请输入密码',
        icon: 'none',
      });
      return;
    }
    if (!state.value.confirmPassword) {
      uni.showToast({
        title: '请输入确认密码',
        icon: 'none',
      });
      return;
    }
    if (!state.value.checked) {
      uni.showToast({
        title: '请同意用户协议',
        icon: 'none',
      });
      return;
    }
    if (state.value.password !== state.value.confirmPassword) {
      uni.showToast({
        title: '两次输入密码不一致',
        icon: 'none',
      });
      return;
    }
    if (!state.value.share) {
      uni.showToast({
        title: '请输入邀请码',
        icon: 'none',
      });
      return;
    }

    const { code } = await sheep.$api.user.smsRegister({
      mobile: state.value.mobile,
      code: state.value.code,
      password: state.value.password,
      share: state.value.share,
      shareInfo: uni.getStorageSync('shareLog') || {},
    });
    if (code === 1) {
      uni.navigateTo({ url: '/pages/index/index' });
      //
    }
  }
  function toLogin() {
    uni.navigateTo({
      url: '/pages/yy/login',
    });
  }
</script>

<style lang="scss" scoped>
  page {
    background-image: url('/static/bg@3x.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
